import React,{useState} from 'react';
import { Card,Button,List, Typography } from 'antd';
import 'antd/dist/antd.css';
//引入连接器
import{connect}from 'react-redux';
const data = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.',
  ];
const App=(props)=>{
    console.log('这里是全部已读的界面-----:通知中心')
    return(
        <Card title="通知中心"  style={{ width: 950 }} extra={<Button onClick={()=>{props.dispatch({type:'ReadAll'})}}>全部已读</Button>}>
        
        <List
        header={<div>Header</div>}
        footer={<div>Footer</div>}
        pagination={{defaultCurrent:1,total:10,defaultPageSize:4}}
        bordered
        dataSource={data}
        renderItem={item => (
        <List.Item style={{display: 'flex',justifyContent:'space-between'}} extra={<Button>{props.isReadAll?'未读':'已读'}</Button>}>
          <Typography.Text mark>[ITEM]</Typography.Text> {item}
        </List.Item>
      )}
    />   
            
        </Card>
    )
}

// export default App;
// export default connect(xxx,null)(TodoList);
// export default connect(stateToProps,dispatchToProps)(App);
export default connect(state=>state.notices)(App);
